<style rel="stylesheet/scss" lang="scss" scoped>
    .t-box {
        display: flex;
        flex: 1;
        min-height: 100%;
        padding: 20px;
        box-sizing: border-box;
        flex-direction: column;
        .t-box_head {
            width: 100%;
            min-height: 40px;
            display: flex;
            line-height: 40px;
            background: #409EFF;
			padding-left: 10px;
			position:relative;
			
			>span{
				color: #fff;
				cursor: pointer;
			}
			.h-band{
				width: auto;
				height: 40px;
				display: flex;
				line-height: 40px;
				background: #409EFF;
				padding-left: 10px;
				position: absolute;
				right: 10px;
				color: #fff;
				cursor: pointer;
			}
        }
        .tabBox {
            overflow: auto;
            height: 780px;
        }
    }
</style>
<template>
	
    <div class="t-box">
        <div class="t-box_head">
			<span @click="addHeadFn" >新增+</span>
			<font class="h-band" @click="setModelHread">确定保存</font>
		</div>
        <div class="tabBox">
            <el-table ref="table" :data="list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="展示属性名称" width="120">
                    <template slot-scope="scope">{{ scope.row.showName }}</template>
                </el-table-column>
                <el-table-column prop="keyName" label="原始属性名称" width="120">
                </el-table-column>
                <el-table-column prop="type" label="属性类型">
                </el-table-column>
                <el-table-column prop="groupName" label="分组名称">
                </el-table-column>
                <el-table-column prop="sort" label="顺序号">
                </el-table-column>
                <el-table-column label="操作" align="left">
                    <template slot-scope="scope">
                        <el-button @click="toHeadEditer(scope.$index,scope.row)" size='mini' type="primary">编辑</el-button>
                        <el-button @click="toHeadDelete(scope.row)" size='mini' type="danger" v-if="scope.row.type != '原始数据'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="title" center :visible.sync="passDialog" width="30%">
            <el-row class="p-all-20 ">
                <el-col :span="100" class="box-flex m-b-10">
                    <span class="sp-w-50 m-r-10">表头名称</span>
                    <el-input v-model="showName" maxLength="20"/>
                </el-col>
            </el-row>
            <el-row class="p-all-20 ">
                <el-col :span="100" class="box-flex m-b-10">
                    <span class="sp-w-50 m-r-10">分组名称</span>
                    <el-input v-model="groupName" maxLength="20"/>
                </el-col>
            </el-row>
            <el-row class="p-all-20 ">
                <el-col :span="100" class="box-flex m-b-10">
                    <span class="sp-w-50 m-r-10">排序号</span>
                    <el-input v-model="sort" type="number" maxLength="5" oninput="if(value.length>5)value=value.slice(0,5)"/>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="passDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveAdmin">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [],
                showName: '',
                groupName: '',
                sort: '',
                keyId: '',
                title: '新建表头',
                passDialog: false,
                selectList: []
            }
        },
        created() {
            this.initHead()
			
        },
        methods: {
			// 设置保存表头
			setModelHread() {
				console.log(this.selectList)
				let attr = []
				this.selectList[0].forEach((item) => {
					if(item.keyId != undefined) {
						attr.push(item.keyId)
					}
				})
				if(!this.selectList[0].length) {
					this.$message({
						type: 'error',
						message: '请选择表头'
					})
					return
				}
				this.$ajax({
					api: 'modelproperty/show',
					params: {
						keyIds: attr.join(',')
					}
				}).then(res => {
					console.log(res)
					if(res.status === 200) {
						this.$message({
							type: 'success',
							message: '保存成功'
						})
					}
				}).catch((err) => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			addHeadFn() {
				this.passDialog = true
				this.title = '新建表头'
				this.showName = this.groupName = this.sort = this.keyId = ''
				//this.saveAdmin()
			},
            toHeadDelete() {

            },
            saveAdmin() {
                let attr = !this.showName ? '请填写表头名称' : !this.groupName ? '请填写分组名称' : !this.sort ? '请填写排序号' : ''
                if (attr) {
                    this.$message({
                        type: 'error',
                        message: attr
                    })
                    return
                }
                this.$ajax({
                    api: 'modelhead/save',
                    params: {
                        keyId: this.keyId,
                        showName: this.showName,
                        groupName: this.groupName,
                        sort: this.sort
                    }
                }).then(res => {
                    if (res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.passDialog = false
                        this.selectList = []
                        this.initHead()
                    }else{
                    	this.$message({
	                        type: 'error',
	                        message: res.data.message
	                    })
                    }
                }).catch(err => {
                    this.$message({
                        type: 'error',
                        message: err.message
                    })
                })
            },
            initHead() {
                this.$ajax({
                    api: 'modelhead'
                }).then(res => {
                    if (res.status === 200) {
                        this.list = res.data
                        setTimeout(() => {
                            this.list.forEach((item, index) => {
                                if (item.selected) {
                                    this.$refs.table.toggleRowSelection(item, true);
                                    this.selectList.push(item)
                                }
                            })
                            this.$refs.table.toggleRowSelection(2, true);
                        }, 20)
                    }
                }).catch(err => {
                    this.$message({
                        type: 'error',
                        message: err.message
                    })
                })
            },
            handleSelectionChange(val) {
                this.selectList = [val]
            },
            toHeadEditer(index, item) {
            	this.title = '编辑表头'
                this.passDialog = true
                this.showName = item.showName
                this.groupName = item.groupName
                this.sort = item.sort
                this.keyId = item.keyId
            },
            toHeadDelete(item) {
                this.$confirm("删除表头？删除以后B端商户也将无法显示此属性,确定删除？",' 删除表头', {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$ajax({
                        api: 'modelhead/delete',
                        params: {
                            keyId: item.keyId
                        }
                    }).then(res => {
                        if (res.status === 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
							this.selectList = []
							this.initHead()
                        }
                    }).catch((err) => {
                        console.log(err)

                        this.$message({
                            message: err.message,
                            type: 'warning'
                        });
                    })
                })
            }
        }

    }
</script>
